<template>
  <div class="bonus">
    <div class="sub-title">
      <div class="content">测算方案对比</div>
    </div>
    <div class="search-form flex-l-r">
      <div class="flex align-center ">
        <span class="txt-bold mg-r15 line-h-20">测算方案</span>
        <el-checkbox-group v-model="schemeId" @change="handleQuickCheckedComputesChange">
          <el-checkbox v-for="item in schemeList" :label="item.id" :key="item.id">{{item.computeName}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="mg-l15">
        <el-button type="primary" @click="submitHandle" class="mg-l15">提交</el-button>
        <el-button type="primary" @click="goBack" plain>返回</el-button>
      </div>
    </div>
    <div>
      <el-table ref="tableRef" :key="tableKey" :data="tableData" v-loading="loading" border  @selection-change="handleSelectionChange" :height="`calc(100vh - 220px )`">
        <el-table-column
          width="60px"
          prop=""
          label="序号"
          align="center"
        >
          <template slot-scope="scope">
            {{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <template v-for="(item,index) in columns" :prop="item.prop" :label="item.label">
          <el-table-column v-if="item.children && item.children.length > 0"  :prop="item.prop" :label="item.label"  :key="item.id">
            <template slot="header">
              <div class="flex" v-show="item.show"  @click="expand(item)">
                <span >{{item.label}}</span><span class="flex flexible-box" ><i class="el-icon-caret-left"></i></span>
              </div> <!--class="txt-ellipse w90"-->
              <div class="flex" v-show="!item.show" @click="expand(item)">
                <span>{{item.label}}</span><span class="flex  flexible-box"><i class="el-icon-caret-right"></i></span>
                <!-- class="txt-ellipse w90"--->
              </div>
            </template>
            <template v-for="(_item,_index) in item.children" >
              <el-table-column v-if="_item.show"   :key="_index" :prop="_item.prop" :label="_item.label">
              </el-table-column>
            </template>
          </el-table-column>
          <el-table-column v-else  :prop="item.prop" :label="item.label" :key="item.id">
          </el-table-column>
        </template>

      </el-table>
    </div>
    <!--新增、编辑-->
    <decomposeForm ref="handleForm" :bonusItemDeptIdOptions="bonusItemDeptIdOptions" :bonusItemsScopeOptions="bonusItemsScopeOptions" @refresh="refresh"></decomposeForm>
  </div>
</template>

<script>
import decomposeForm from "@/views/bonusmanage/items/decomposeForm";
import {deleteBatch, getChildren, getPid} from '@/api/bonus/items'
import {remote as remoteDict} from '@/api/admin/dict';
import {getUserColumns} from "@/api/bonus/calculateuserprogramme";
export default{
  name:"decompose",
  components:{
    decomposeForm
  },
  data() {
    return {
      show:true ,
      loading:false,
      page:{
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [
        /*{
          dwtjxs : 1 ,
          dwtjhje : 2 ,
          count : 3
        }*/
      ],
      filteredData:[],
      searchForm: {bonusItemDeptId:''},
      bonusItemDeptIdOptions:[], //机构
      bonusItemsScopeOptions:[
        {label:'公共',value:'公共'},
        {label:'私有',value:'私有'}
      ], //奖金范围
      multipleSelection: [],
      ids:[],
      bonusItem:{},
      schemeList: [],
      schemeId:[],
      columns:[

      ],
      tableKey:new Date().getTime(),
      width:'200px'
    }
  },
  computed: {

  },
  created(){

  },
  methods:{
    init(schemeIds){
     /* this.bonusItem = data ;
      this.deptId = deptId ;*/
      //选择的方案ids
      this.ids = schemeIds ;
      //获取动态列
      this.getDynamicColumns() ;
    },
    getDynamicColumns(){
      this.loading = true ;
      getUserColumns({ids: this.ids.toString()}).then(res=>{
        if (res.data.code == 0){

          this.schemeList = res.data.data.computePersonList
          this.columns = res.data.data.bonusColumnList

          //构筑值
          if(res.data.data.dataList.length != 0){
            var array = []
            res.data.data.dataList.map((item,index) =>{
              const dtObject = {}
              item.map(item2 =>{
                dtObject[item2.prop] = item2.propValue
              })
              array.push(dtObject)
              this.tableData = array
            })
          }
          this.mapTree(this.columns) //遍历树，每个节点添加属性 show ,初始将每个列都展开
        }
        this.loading = false ;
      }).finally(()=>{
        this.loading = false ;
      }).catch(err=>{

      })

    },
    //遍历tree
    mapTree (data) {
      data.forEach(items => {    //遍历树 拼入相应的元素
        //当前元素条件判断
        items.show = true //添加新属性
        if (items.children) {
          //根据孩子元素的条件进行判断
          for(let item of items.children){
            item.show = true //添加新属性
          }
          this.mapTree(items.children)
        }
      })
    },
    submitHandle(){

    },
    handleQuickCheckedComputesChange(item){
      console.log(item)
    },
    handleSelectionChange(list){
      this.multipleSelection = list ;
      this.ids = this.multipleSelection.map((ele) => {
        return ele.id
      })
    },
    goBack(){
      this.tableData = []
      this.$emit('close')
    },
    refresh(){

    },
    expand(item){

      item.show = !item.show
      item.children.map((_item,index)=>{
        if (item.children.length == (index + 1)){
          return ;
        }
        _item.show = !_item.show
      })
      console.log("item:",item)
      this.tableKey ++
      this.$refs.tableRef.doLayout() ;
    }
  }
}
</script>
<style scoped>

</style>
